<template>
  <div class="echartsBox" style="page-break-inside:avoid;">
    <ReportEcharts :option="option" :imgList="temperatureImg" :bigFontFlag="props.bigFontFlag" :id="id"/>
  </div>
</template>

<script setup lang="ts">
import {reactive, getCurrentInstance, ref, toRefs, watch} from 'vue'
import {ReportEcharts} from "@/components/ReportEcharts";

interface temperatureType {
  reportData: any,
  bigFontFlag: boolean
}

const props = defineProps<temperatureType>()

const {proxy} = getCurrentInstance() as any
const echarts = proxy.$echarts

type EChartsOption = echarts.EChartsOption

const id = ref(('temperatureEchatrs' + Math.random()).replace(".", ""))

interface DataType {
  temperatureImg: Array<object>
  option: EChartsOption
}

const data = reactive<DataType>({
  temperatureImg: [
    {
      url: 'maxBp.png',
      text: '最高体温',
      value: '0°C'
    },
    {
      url: 'lowBp.png',
      text: '最低体温',
      value: '0°C'
    },
    {
      url: 'avgBp.png',
      text: '平均体温',
      value: '0°C'
    }
  ],
  option: {
    grid: {
      left: '5%',
      right: '9%',
      bottom: '10%',
      top: '2%',
      containLabel: true
    },
    dataZoom: [
      {
        type: 'inside',
        realtime: true,
        start: 0,
        end: 100,
        show: false
      },
    ],
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: [],
      axisTick: {
        show: false
      }
    },
    yAxis: {
      type: 'value',
      min: 30,
      max: 40,
    },
    legend: {
      data: ['体温'],
      left: 'center',
      top: 'bottom',
      icon: 'rect',
      itemHeight: 8,
      itemWidth: 8
    },
    series: [
      {
        name: '体温',
        data: [], //血氧值
        type: 'line',
        symbol: 'none', //不要折点
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
            {
              offset: 0,
              color: 'rgba(0, 169, 145, 0)'
            },
            {
              offset: 1,
              color: 'rgba(0, 169, 145, 0.2)'
            }
          ])
        },
        // 折点颜色
        itemStyle: {
          color: 'rgba(0, 169, 145, 1)'
        },
        markLine: {
          silent: true,
          data: [
            {
              yAxis: 35,
              symbol: 'none',
              label: {
                fontSize: '10px',
                color: 'rgba(252, 125, 2, 1)',
                formatter: '{c}℃'
              },
              lineStyle: {
                color: 'rgba(252, 125, 2, 1)',
              },
            },
            {
              yAxis: 37.5,
              symbol: 'none',
              label: {
                fontSize: '10px',
                color: 'rgba(253, 1, 0, 1)',
                formatter: '{c}℃'
              },
              lineStyle: {
                color: 'rgba(253, 1, 0, 1)',
              },
            },
          ]
        }
      }
    ],
    visualMap: {
      show: false,
      pieces: [
        {
          gte: 0,
          lt: 35,
          color: 'rgba(252, 125, 2, 1)'
        },
        {
          gte: 35,
          lte: 37.5,
          color: 'rgba(0, 169, 145, 1)'
        },
        {
          gt: 37.5,
          color: 'rgba(253, 1, 0, 1)'
        }
      ],
      outOfRange: {
        color: 'rgba(153, 153, 153, 1)'
      }
    },
  }
})

const {temperatureImg, option} = toRefs(data)
const setData = (data: any) => {
  //体温
  const {
    abscissa,
    temperatureRateAxis,
    highestTemperatureRate,
    lowestTemperatureRate,
    avgTemperatureRate,
    lowWarnValue, highWarnValue
  } = data || {}
  temperatureImg.value = [
    {
      url: 'maxBp.png',
      text: '最高体温',
      value: (highestTemperatureRate ? highestTemperatureRate : '-') + '°C'
    },
    {
      url: 'lowBp.png',
      text: '最低体温',
      value: (lowestTemperatureRate ? lowestTemperatureRate : '-') + '°C'
    },
    {
      url: 'avgBp.png',
      text: '平均体温',
      value: (avgTemperatureRate ? avgTemperatureRate : '-') + '°C'
    }
  ]
  option.value.xAxis.data = abscissa || []
  option.value.series[0].data = temperatureRateAxis || []
  option.value.xAxis.axisLabel = {
    interval: function (index: number) {
      let size = temperatureRateAxis.length;
      if (size <= 4) {
        return true;
      } else if (index == 0 ||
        index == Math.floor(size * 0.3333) ||
        index == Math.floor(size * 0.6666) ||
        index == size - 1) {
        return true;
      }
    }
  }
  option.value.series[0].markLine = {
    silent: true,
    data: [
      {
        yAxis: lowWarnValue || 35,
        symbol: 'none',
        label: {
          fontSize: '10px',
          color: 'rgba(252, 125, 2, 1)',
          formatter: '{c}℃'
        },
        lineStyle: {
          color: 'rgba(252, 125, 2, 1)',
        },
      },
      {
        yAxis: highWarnValue || 37.5,
        symbol: 'none',
        label: {
          fontSize: '10px',
          color: 'rgba(253, 1, 0, 1)',
          formatter: '{c}℃'
        },
        lineStyle: {
          color: 'rgba(253, 1, 0, 1)',
        },
      },
    ]
  }

  option.value.visualMap = {
    show: false,
    pieces: [
      {
        gte: 0,
        lt: lowWarnValue || 35,
        color: 'rgba(252, 125, 2, 1)'
      },
      {
        gte: lowWarnValue || 35,
        lte: highWarnValue || 37.5,
        color: 'rgba(0, 169, 145, 1)'
      },
      {
        gt: highWarnValue || 37.5,
        color: 'rgba(253, 1, 0, 1)'
      }
    ],
    outOfRange: {
      color: 'rgba(153, 153, 153, 1)'
    }
  }
}

if (props.bigFontFlag) {
  setData(props.reportData);
}
//监听reportData变化
watch(
  () => props.reportData,
  (newValue) => {
    setData(newValue);
  },
  {
    deep: true
  }
)
</script>

<style scoped lang="less"></style>
